<template>
  <div class="card-content">
    <div class="title">项目预约记录</div>
    <div class="card-search">
      <div class="left">
        <div class="input">
          <el-input placeholder="请输入会员名称" v-model="memberName"/>
        </div>
        <div class="input">
          <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"/>
        </div>
      </div>
      <div class="right">
        <div class="btn primary">查询</div>
        <div class="btn plain" @click="addDeposit">
          <i class="el-icon-plus"></i>
          <span>新增预约</span>
        </div>
      </div>
    </div>
    <div class="card-list">
      <div>
        <el-table :data="appointList.data">
          <el-table-column type="index" label="序号"/>
          <el-table-column prop="userName" label="会员姓名"/>
          <el-table-column prop="project" label="项目"/>
          <el-table-column prop="doctor" label="预约医生"/>
          <el-table-column prop="appointTime" label="预约时间" :show-overflow-tooltip="true"/>
          <el-table-column prop="updateTime" label="更新时间" :show-overflow-tooltip="true"/>
          <el-table-column label="操作">
            <template slot-scope="item">
              <span class="operation" @click="viewProject(item.row)">查看详情</span>
              <span class="operation opr-exec" @click="execProject(item.row)">执行项目</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="appointList.data.length > 0" class="pager">
        <el-pagination background
                       layout="sizes,prev,pager,next,jumper,->,slot"
                       @current-change="handlePageChange"
                       @next-click="handlePageChange"
                       @prev-click="handlePageChange"
                       :current-page="queryTerms.pageNo"
                       :page-size="queryTerms.pageSize"
                       :total="appointList.count">
        </el-pagination>
      </div>
    </div>
    <add-appoint ref="addPoint"/>
    <appoint-details ref="appointDetails"/>
  </div>
</template>

<script>

import AddAppoint from '@/views/member/dialog/addAppoint'
import AppointDetails from '@/views/member/dialog/appointDetails'
export default {
  name: 'appoint',
  components: { AppointDetails, AddAppoint },
  data () {
    return {
      memberName: '',
      dateRange: '',
      cardTypes: [
        { value: 'guibing', label: '贵宾' },
        { value: 'normal', label: '普通' }
      ],
      appointList: { data: [], count: 6 },
      queryTerms: {
        pageNo: 1,
        pageSize: 5
      }
    }
  },
  created () {
    for (let i = 1; i < 8; i++) {
      this.appointList.data.push(
        { userName: '王林' + i, project: '中医检测' + i, doctor: '李辉' + i, appointTime: '2021-3-27 15:0' + i, updateTime: '2021-01-23 08:00:0' + i }
      )
    }
    this.appointList.count = this.appointList.data.length
  },
  methods: {
    handlePageChange (val) {
      this.queryTerms.pageNo = val
      this.getCardList()
    },
    getCardList () {

    },
    viewProject (project) {
      console.log(project)
      this.$refs.appointDetails.show()
    },
    execProject (project) {
      console.log(project)
      this.$router.push('/actuation/begin')
    },
    addDeposit () {
      this.$refs.addPoint.show()
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/styles/variables';
.card-content {
  flex-grow: 1;
  .title {
    padding: 20px 30px;
    background: #FFFFFF;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
  .card-search {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 20px;
    background: #FFFFFF;
    .left {
      display: flex;
      align-items: center;
      .input {
        margin-left: 20px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .btn {
        width: 88px;
        height: 39px;
        text-align: center;
        line-height: 39px;
        margin-left: 20px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 3px;
      }
      .primary {
        background: $mainBg;
        color: #FFFFFF;
      }
      .plain {
        background: #FFFFFF;
        border: 1px solid $mainBg;
        color: $mainBg;
      }
    }
  }
  .card-list {
    background: #FFFFFF;
    padding: 20px;
    margin: 20px;
    .operation{
      cursor: pointer;
      color: $mainBg;
    }
    .opr-exec{
      margin-left: 10px;
    }
    .pager {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
